<template>
  <div class="myOrder">
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分start
        -->
    <!--<mt-header fixed title="我的订单">-->
      <!--<router-link to="/home/myHome" slot="left">-->
        <!--<mt-button icon="back">返回</mt-button>-->
      <!--</router-link>-->
      <!--<mt-button icon="more" slot="right"></mt-button>-->
    <!--</mt-header>-->
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分end
        -->
    <div class="order_nav" id="tab">
      <ul class="nav_h">

    <!--    <li class="active"><router-link to="/myOrderAll" :class="{'cur':curId===3}" replace>全部</router-link></li>-->
        <li><router-link to="/myOrderIng" :class="{'cur':curId===0}" replace>拼单中</router-link></li>
        <li><router-link to="/myOrderWaiting" :class="{'cur':curId===1}" replace>待发货</router-link></li>
        <li><router-link to="/myOrderAlready" :class="{'cur':curId===2}" replace>已发货</router-link></li>
        <li><router-link to="/myOrderReturn" :class="{'cur':curId===4}" replace>退货/</router-link></li>
      </ul>
    </div>
    <div class="order_list" >
      <div class="order_box" v-for="(order,index) in list" :key=order.id>
        <div class="order_show" v-show="all?true:(order.state===curId?true:false)">
          <div class="order_t">
            <div class="order_c">
              订单号：  {{order.orderId}}
            </div>
            <div class="order_state">
              <div class="order_state_left">
                <router-link to="/personalOrder" class="p2">
                  {{states[order.orderState]}}<span v-show="order.state===0?true:false">差{{order.numPerson}}件</span>
                </router-link>
              </div>
              <div class="order_state_right">
                <img  src="../../assets/images/right.png">
              </div>
            </div>
          </div>
          <div class="order_content">
            <div class="oc_img">
              <img :src="order.mallImg">
            </div>
            <div class="oc_content">
              <div class="oc_title">
                <router-link to="/pinDetail" class="p2">
                  {{order.mallName}}
                </router-link>
              </div>
              <div class="oc_money">
                ￥{{order.salePrice/100}}
              </div>
             <!-- <div class="oc_time">
                剩余时间：<Countdown :endTime = "Date.parse(new Date(order.timeEnd)).toString()"  endText="已经结束了"></Countdown>
              </div>-->
            </div>
          </div>
          <div class="order_foot">
            <div class="order_footer_c" v-show="order.state===0?true:false">
              <div class="order_more" @click="updateCount(index)">
                更多
              </div>
              <div class="order_again">
                <router-link to="/Collage" class="p2">
                  再拼一次
                </router-link>
              </div>
              <div class="order_invite">
                <router-link to="/PinDanDetails" class="p3">
                  邀请拼单
                </router-link>
              </div>
              <div class="operation_order" v-show="0===index?choseShow:false">
                <p class="delete" @click="del(index)">关闭团单</p>
              </div>
            </div>
            <div class="order_footer_c" v-show="order.orderState===1?true:false">
              <div class="order_chak">
                <router-link to="/personalOrder" class="p4" replace>
                  查看拼单
                </router-link>
              </div>
              <div class="order_zaip">
                <router-link to="/Collage" class="p2">
                  再拼一次
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /* eslint-disable indent,no-tabs,key-spacing,no-trailing-spaces,space-before-function-paren,quotes,spaced-comment,semi,no-undef,comma-spacing,no-cond-assign,no-constant-condition,space-before-blocks,keyword-spacing,yoda */
  import Vue from 'vue'
  import Mint from 'mint-ui'
  import 'mint-ui/lib/style.css'
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../../components/httpUtil/httpUtil'
  import {msg_10046} from '../../message/msg_10046'
  //import Countdown from "./Countdown.vue";
  Vue.use(Mint)
  export default {
    name: 'myOrder',
    data() {
      return {
        curId: 1,
        list: {},
        states:{0:'拼单中',1:'待发货', 10:'人数未满结束', 11:'创建者强行结束',12:'平台强行结束订单'},
        all:true,
        showc:true,
        choseShow:false
      }
    },
    computed: {},
    beforeCreate:function() { // 生命周期
      // goHistoryUrl();
      {
        const jsonValue = JSON.stringify({
          "c": "10051",
          "p": {
            "userId": JSON.parse(window.localStorage.data).id, //用户ID
            "startIndex": 0, // 开始位置
            "pageSize": 10, // 分页总数量
            "tokenId":token(),
            "orderState":3
          }
        });
        this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
          this.list = res.data.p.orderConductMallList
          this.hideLoading()
          console.log(this.list);
        })
      }
    },
    methods: {
      /*isShow(n){
        if(n){
          this.curId = n - 1;
          this.all = false;
        }else {
          this.curId = 3
          this.all = true;
        }
      },*/
      updateCount: function (index) {
        if(0 === index){
          this.choseShow = !this.choseShow
        }
      },
      del:function (index) {
// eslint-disable-next-line comma-spacing
        this.list.splice(index,1)
      }
    },
    created(){
      if(window.localStorage.data && JSON.parse(window.localStorage.data).type==1){
        this.type='1';
      }else{
        this.type='0';
      }
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    }
  }
</script>

<style scoped>
  .mint-header {
    background: #1c1b20;
    width: 100%;
  }

  .highlight {
    opacity: 0;
  }
  .Team_btn {
    text-align: center;
  }
  .mint-cell-text {
    margin-left: 30px;
  }

  .mint-cell-label {
    margin-left: 53px;
  }

  .t_list {
    width: 100%;
    height: 131px;
    float: left;
  }

  .list_img {
    width: 112px;
    height: 131px;
    float: left;
    padding-top: 9px;
  }

  .list_img img {
    width: 112px;
    height: 112px;
    margin-left: 24px;
  }

  .list_c {
    width: 160px;
    height: 131px;
    float: left;
    margin-left: 40px;
    padding-top: 28px;
  }

  .icon_img {
    width: 15px;
    height: 131px;
    float: right;
    line-height: 131px;
    margin-right: 30px;
  }

  .icon_img img {
    width: 12px;
    height: 22px;
  }

  .order_nav {
    width: 100%;
    height: 100px;
    background: #F4F4F4;
    position: fixed;
    top: -8px;
    z-index: 999;
  }

  .nav_h {
    height: 80px;
    background: #FFFFFF;
    line-height: 80px;
  }

  .nav_h li {
    float: left;
    width: 24%;
    height: 80px;
    display: block;
    text-align: center;
    font-size: 24px;
  }

  .nav_h li a {
    text-decoration: none;
    color: #3b3b43;
  }

  .cur {
    color: #fe3519 !important;
  }

  .order_list {
    margin-top: 160px;
  }

  .active {
    color: #fe3519;
  }

  .order_t {
    width: 100%;
    height: 80px;
  }

  .order_img {
    width: 48px;
    height: 80px;
    float: left;
    margin-left: 30px;
  }

  .order_img img {
    width: 48px;
    height: 48px;
    margin-top: 20px;
  }

  .order_c {
    font-size: 24px;
    height: 80px;
    float: left;
    margin-left: 30px;
    line-height: 80px;
  }

  .order_state {
    /*   width: 260px;*/
    height: 80px;
    float: right;
    color: #fe3519;
    margin-right: 30px;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
  }
  .p2{
    color: #fe3519;
  }
  .p3{
    color: #ffffff;
  }
  .p4{
    color: #A1A1A1;
  }
  .p2:focus{
    text-decoration: none;
  }
  .p3:focus{
    text-decoration: none;
  }
  .order_state_left{
    float: left;
    height:80px ;
    padding-right: 20px;
  }
  .order_state_right{
    float: right;
    width: 20px;
    height: 80px;
  }
  .order_state_right img{
    width: 16px;
    height: 16px;
  }

  .order_content {
    width: 100%;
    height: 240px;
    border-bottom: 1px solid #F4F4F4;
    border-top: 1px solid #F4F4F4;
  }

  .oc_img {
    width: 27%;
    height: 230px;
    float: left;
    margin-left: 30px;
    margin-top: 30px;
  }

  .oc_img img {
    width: 175px;
    height: 175px;
  }

  .oc_content {
    width: 62%;
    height: 240px;
    float: right;
    margin-left: 20px;
  }

  .oc_title {
    width: 370px;
    height: 70px;
    margin-top: 30px;
    font-size: 24px;
    color: #3b3b43;
  }

  .oc_money {
    width: 370px;
    height: 40px;
    color: #3b3b43;
    font-size: 24px;
    margin-top: 40px;
  }
  .oc_time{
    color: #FE3519;
    font-size: 24px;
  }

  .order_foot {
    width: 100%;
    height: 110px;
    background: #F4F4F4;
  }

  .order_footer_c {
    width: 100%;
    height: 90px;
    background: #FFFFFF;
  }

  .order_more {
    width: 50px;
    height: 90px;
    line-height: 90px;
    font-size: 20px;
    float: left;
    display: block;
    margin-left: -60px;
  }

  .order_again {
    width: 180px;
    height: 64px;
    border: 1px solid #fe3519;
    float: left;
    color: #fe3519;
    text-align: center;
    border-radius: 30px;
    line-height: 64px;
    font-size: 24px;
    margin-left: 30px;
    margin-top: 13px;
  }
  .order_chak{
    width: 180px;
    height: 64px;
    border: 1px solid #a1a1a1;
    float: left;
    color: #a1a1a1;
    text-align: center;
    border-radius: 30px;
    line-height: 64px;
    font-size: 24px;
    margin-left: 30px;
    margin-top: 13px;

  }

  .order_invite {
    width: 180px;
    height: 64px;
    float: right;
    margin-right: 10px;
    color: #FFFFFF;
    text-align: center;
    border-radius: 30px;
    line-height: 64px;
    font-size: 24px;
    margin-left: 27px;
    margin-top: 13px;
    background: url(../../assets/images/btn2@1x.png);
    background-size: cover;
  }
  .order_zaip{
    width: 180px;
    height: 64px;
    float: right;
    margin-right: 10px;
    color: #FFFFFF;
    text-align: center;
    border-radius: 30px;
    line-height: 64px;
    font-size: 24px;
    margin-left: 27px;
    margin-top: 13px;
    border: 1px solid #fe3519;
    color: #fe3519;

  }

  .operation_order {
    width: 148px;
    height: 148px;
    background: url(../../assets/images/bg@1x.png);
    position: relative;
    top: 75px;
    left: 88px;
    text-align: center;
    background-size: cover;
  }

  .operation_order p {
    width: 148px;
    height: 30px;
    color: #a1a1a1;
    font-size: 22px;
  }

  .cancel {
    position: relative;
    top: -60px;
    height: 30px;
  }

  .delete {
    position: relative;
    top: -28px;
    height: 30px;
  }
</style>
